page{
	height: 100%;
	/* 主题颜色 */
	--color-primary:#14B8C4;
	// --color-primary:#85B6DE;
	--color-success: #4cd964;
	--color-warning: #f0ad4e;
	--color-error: #dd524d;
	--color-info:#333;/* 基本色 */
	--color-black:#000;/* 基本色 */
	--color-white:#fff;/* 反色 */
	--color-grey:#888;/* 辅助灰色，如加载更多的提示信息 */
	--color-placeholder: #808080;
	--color-disable:#c0c0c0;
	--color-hover:#f1f1f1;/* 点击状态颜色 */
	--color-mask:rgba(0, 0, 0, 0.4);/* 遮罩颜色 */
	--color-pice:#ff5000;/* 金币颜色*/
	--border-color:#c8c7cc; /* 边框颜色*/ 
	--pacge-bgColor:#fdfdfd; /* page背景颜色*/
}
.page{
	height: 100%;
	background: rgba(0, 0, 0, 0.06);
}
/* 背景颜色 */
.bg-primary{background-color: var(--color-primary);}
.bg-white{background-color: var(--color-white);}
.bg-grey{background-color: var(--color-grey);}
.bg-page{background-color: var(--pacge-bgColor);}
.bg-disable{background-color: var(--color-disable);}
/* 字体颜色 */
.color-primary{color: var(--color-primary);}
.color-success{color: var(--color-success);}
.color-warning{color: var(--color-warning);}
.color-error{color: var(--color-error);}
.color-white{color: var(--color-white);}
.color-black{color: var(--color-black);}
.color-info{color:var(--color-info) ;}
.color-grey{color: var(--color-grey);}
.color-pice{color: var(--color-pice);}
/* 弹性容器 */
.flex{display: flex;}
.flex-ac{display: flex;align-items: center;}
.flex-jfc-ac{display: flex;justify-content: center;align-items: center;}
.flex-jf-sb-ac{display: flex;justify-content: space-between;align-items: center;}
.flex-jf-sa-ac{display: flex;justify-content: space-around;align-items: center;}
.flex-jf-end-ac{display: flex;justify-content: flex-end;align-items: center;}
.flex-wrap{flex-wrap: wrap;}
.flex-dir-c{display: flex;flex-direction: column;}
.flex-dir-w{display: flex;flex-direction: row;}
.flex-1{flex: 1;}
.flex-2{flex: 2;}
.flex-3{flex: 3;}
.flex-4{flex: 4;}
.flex-5{flex: 5;}
/* 内边距 */
.pg-30{padding: 30rpx;}
.pg-20{padding: 20rpx;}
.pg-10{padding: 10rpx;}
.px-30{padding-left: 30rpx;padding-right: 30rpx;}
.px-20{padding-left: 20rpx;padding-right: 20rpx;}
.px-10{padding-left: 10rpx;padding-right: 10rpx;}
.py-30{padding-top: 30rpx;padding-bottom: 30rpx;}
.py-20{padding-top: 20rpx;padding-bottom: 20rpx;}
.py-10{padding-top: 10rpx;padding-bottom: 10rpx;}
.pl-30{padding-left: 30rpx;}
.pl-20{padding-left: 20rpx;}
.pl-10{padding-left: 10rpx;}
.pr-30{padding-right: 30rpx;}
.pr-20{padding-right: 20rpx;}
.pr-10{padding-right: 10rpx;}
.pt-30{padding-top: 30rpx;}
.pt-20{padding-top: 20rpx;}
.pt-10{padding-top: 10rpx;}
.pb-30{padding-bottom: 30rpx;}
.pb-20{padding-bottom: 20rpx;}
.pb-10{padding-bottom: 10rpx;}
/* 外边距 */
.mg-30{margin: 30rpx;}
.mg-20{margin: 20rpx;}
.mg-10{margin: 10rpx;}
.mx-30{margin-left: 30rpx; margin-right: 30rpx;}
.mx-10{margin-left: 10rpx;margin-right: 10rpx;}
.mx-20{margin-left: 20rpx;margin-right: 20rpx;}
.my-30{margin-top: 30rpx;margin-bottom: 30rpx;}
.my-320{margin-top: 20rpx;margin-bottom: 20rpx;}
.my-10{margin-top: 10rpx;margin-bottom: 10rpx;}
.mt-30{margin-top: 30rpx;}
.mt-20{margin-top: 20rpx;}
.mt-10{margin-top: 10rpx;}
.mb-30{margin-bottom: 30rpx;}
.mb-20{margin-bottom: 20rpx;}
.mb-10{margin-bottom: 10rpx;}
.ml-30{margin-left: 30rpx;}
.ml-20{margin-left: 20rpx;}
.ml-10{margin-left: 10rpx;}
.mr-30{margin-right: 30rpx;}
.mr-20{margin-right: 20rpx;}
.mr-10{margin-right: 10rpx;}
/* 阴影 */
.box-shadow{box-shadow: 0rpx 1rpx 21rpx 3rpx rgba(0, 0, 0, 0.06) ;}
.box-shadow-g{box-shadow: 0rpx 1rpx 21rpx 3rpx rgba(0, 0, 0, 0.2) ;}
/* 圆角 */
.border-rs10{border-radius: 10rpx;}
.border-rs20{border-radius: 20rpx;}
.border-rs{border-radius: 50%;}
/* 边框 */
.border-b{border-bottom: 1rpx solid var(--border-color);}
.border{border: 1rpx solid var(--border-color);}
.border-b-do{border-bottom: 1rpx dotted var(--border-color);}
/* 字号 */
.font-36{font-size: 36rpx;}
.font-34{font-size: 34rpx;}
.font-32{font-size: 32rpx;}
.font-30{font-size: 30rpx;}
.font-28{font-size: 28rpx;}
.font-26{font-size: 26rpx;}
.font-24{font-size: 24rpx;}
.font-weight{font-weight: bold;}
/* 文本对齐方式 */
.text-al{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
/* 定位 */
.position-r{
	position: relative;
}
/* 宽高 */
.w-100{width: 100%;}
.h-100{height: 100%;}
/* 页面淡入效果 */
.pageNane{
	display: none;
	opacity: 0;
	transition: all 0.3s;
}
.pageNane.pageShow{
	display: block;
	animation: show 0.4s;
	/* 保存在动画最后一阵的效果 */
	animation-fill-mode:forwards
}
@keyframes show {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
/*hover-class 动画*/ 
@keyframes hover{ 
	0%{
		opacity: 1;
		transform: scale(1);
	}
	50%{
		opacity: 0.8;
		transform: scale(0.95);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}